/**
 * 插件生效选择选项按钮时更换当前页面按钮颜色
 */
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    // document.body.style.backgroundColor = color;
    let preElements = document.querySelectorAll("pre");
    insertAfter(preElements, color);
  });
}

/**
 *
 * @param {string} targetElement  当前页面的所有pre元素
 * @param {string} color  插件按钮的颜色
 * 页面有多少pre元素 生成多少button按钮
 */
function insertAfter(targetElement, color) {
  for (var i = 0; i < targetElement.length; i++) {
    // 找到弹窗组件不进行创建按钮  找不到则进行创建
    if (!targetElement[i].closest("#overlay")) {
      let newParent = document.createElement("div"); // 创建一个新的父元素
      newParent.className = "code-div";
      let button = document.createElement("button");
      button.className = "code-buttons";
      button.innerHTML = `新按钮${i}`;
      button.style.border = `1px solid ${color}`;
      button.style.backgroundColor = color;
      newParent.appendChild(button);
      targetElement[i].parentNode.insertBefore(
        newParent,
        targetElement[i].nextSibling
      );
    }
  }
}

/**
 * 生成弹框组件 构建html
 */
function createOverlay() {
  const overlay = document.createElement("div");
  overlay.id = "overlay";
  overlay.innerHTML = `
    <div class="content">
    <pre class="code-pre">
      <code class="code-centents">
        </code>
    </pre>
      <button id="hideOverlay">关闭蒙层</button>
    </div>
  `;
  document.body.appendChild(overlay);
}

/**
 * 获取动态添加的button按钮
 */
function GetCodeBtn() {
  chrome.storage.sync.get({ myElement: null }, (result) => {
    let overlay = document.getElementById("overlay");
    let codediv = document.querySelectorAll(".code-div");
    openPopupComponents(codediv, overlay);
  });
}

/**
 * 一个可以识别是什么语言得功能函数
 * @param {代码块} code 
 * @returns  语言
 */
function identifyLanguage(code) {
  // 匹配CSS代码的特性
  if (/^[^{]+{/.test(code)) {
      return 'css';
  }

  // 匹配JS代码的特性
  if (/var|let|const|function/.test(code)) {
      return 'javascript';
  }

  // 匹配HTML代码的特性
  if (/<[^>]+>/.test(code)) {
      return 'html';
  }

  // 匹配Vue代码的特性
  if (/<template>|<script>|<style>/.test(code)) {
      return 'Vue';
  }

  return 'Unknown';
}

/**
 *
 * @param {element} btnList 所有button、的元素
 * @param {element} mask  蒙层的元素
 */
function openPopupComponents(btnList, mask) {
  console.log("eleList", btnList);
  btnList.forEach((element) => {
    element.addEventListener("click", function (e) {
      overlay.style.display = "block";
      // // 发送一个自定义事件给插件
      // chrome.runtime.sendMessage({ message: "Hello from content script" }, function (response) {
      //   // 插件接收到事件后进行处理
      //   if (response) {
      //     console.log("插件已停止运行");
      //   } else {
      //     console.log("插件未停止运行");
      //   }
      // });
      // 拿到btn按钮的上级兄弟节点 pre元素
      let preElementsContens = e.target.parentNode.previousElementSibling;

      // 拿到弹框内容的元素
      let popupSubstance = document.querySelector(".code-centents");
      let language =  identifyLanguage(preElementsContens.textContent)
      console.log(language)
      // popupSubstance.style.width = preElementsContens.offsetWidth + "px";
      popupSubstance.style.height = preElementsContens.offsetHeight + "px";
      popupSubstance.innerHTML = preElementsContens.innerHTML;
      // 高亮代码
      hljs.highlightElement(popupSubstance,language);
    });
  });
  // clsoePopupComponents();
}

/**
 * 关闭弹框组件
 */
// function clsoePopupComponents() {

chrome.storage.sync.get({ myElement: null }, (result) => {
    let hideOverlayMask = document.getElementById("overlay");
    let hideOverlayButton = document.getElementById("hideOverlay");
    hideOverlayMask.addEventListener("click", (e) => {
      if (e.target.parentNode === hideOverlayMask || e.target === hideOverlayButton) {
        hideOverlayMask.style.display = "none";
      }
    });
  });

setPageBackgroundColor();
createOverlay();
GetCodeBtn();
